<template>
  <m-page-wrapper>
    <m-table
    ref="tableRef"
    cacheKey="test-table"
    api="/test/table" 
    :columns="columns"
    :pagination="mPagination"
    :showSettings="true"></m-table>
  </m-page-wrapper>
</template>
<script setup lang="ts">
import { h, reactive, ref } from 'vue';
import { MTableColumnType, TableActionType } from '/@/components/Table/types';
// 分页对象定义
const mPagination = reactive({
  current: 2,
  pageSize: 10,
  total: 0,
  showQuickJumper: true
})
const tableRef = ref<TableActionType>()
const columns = ref<Array<MTableColumnType>>([{
  title: '单行文本',
  dataIndex: 'input',
  key: 'input',
},{
  title: '单选框',
  dataIndex: 'radio',
  key: 'radio',
  component: "Radio"
},{
  title: '单选框组',
  dataIndex: 'radioGroup',
  key: 'radioGroup',
  component: "RadioGroup",
  componentProps: {
    api: '/test/lv'
  }
},{
  title: '评分',
  dataIndex: 'rate',
  key: 'rate',
  component: "Rate",
  componentProps: {
    count: 10
  }
},{
  title: '滑动条',
  dataIndex: 'slider',
  key: 'slider',
  component: "Slider",
  componentProps: {
    mark(data: any) {
        if(data.point>=40) {
          return h('span',{
            style: {
              color: 'red'
            }
          },data.label)
        } else {
          return h('span',{},data.label)
        }
      },
      marks: {
        0: '0°C',
        26: '26°C',
        37: '37°C',
        50: '50°C',
      }
  }
},{
  title: '开关',
  dataIndex: 'switch',
  key: 'switch',
  component: "Switch",
  componentProps: {
    checkedChildren() {
      return "打开"
    },
    unCheckedChildren: "关闭"
    }
},{
  title: '自动完成',
  dataIndex: 'autoComplete',
  key: 'autoComplete',
  component: "AutoComplete",
  componentProps: {
  }
},{
  title: '级联选择',
  dataIndex: 'cascader',
  key: 'cascader',
  component: "Cascader",
  componentProps: {
    api: '/test/cascader'
  }
},{
  title: '多选组',
  dataIndex: 'checkboxGroup',
  key: 'checkboxGroup',
  component: "CheckboxGroup",
  componentProps: {
    api: '/test/lv'
  }
},{
  title: '日期',
  dataIndex: 'datepicker',
  key: 'datepicker',
  component: "DatePicker",
  componentProps: {
  }
},{
  title: '日期区间',
  dataIndex: 'rangepicker',
  key: 'rangepicker',
  component: "RangePicker",
  componentProps: {
  }
},{
  title: '时间',
  dataIndex: 'timePicker',
  key: 'timePicker',
  component: "TimePicker",
  componentProps: {
  }
},{
  title: '时间区间',
  dataIndex: 'timeRangePicker',
  key: 'timeRangePicker',
  component: "TimeRangePicker",
  componentProps: {
  }
},{
  title: '穿梭框',
  dataIndex: 'transfer',
  key: 'transfer',
  component: "Transfer",
  componentProps: {
    api: '/test/transfer'
  }
},{
  title: '树选择',
  dataIndex: 'treeSelect',
  key: 'treeSelect',
  component: "TreeSelect",
  componentProps: {
    api: '/test/cascader'
  }
},{
  title: '上传',
  dataIndex: 'upload',
  key: 'upload',
  component: "Upload"
},])
</script>
<style lang="less" scoped>
</style>
<style lang="less" scoped>

</style>